<!--
 * @Author: ningjz
 * @Date: 2022-04-11 18:05:47
 * @Description: 
-->
<template>
  <div class="nav-box">
    <com-box :title="lineState.title" class="box-echarts">
      <template v-slot>
        <div class="box">
          <div class="box-line">
            <div class="line-til" v-show="lineState.taskCodeIndex.length > 0">
              选择了不同频率任务的品种，无法呈现趋势
            </div>
            <charts
              v-show="lineState.taskCodeIndex.length === 0"
              class="line-chart"
              :params="lineState.params"
            ></charts>
          </div>
        </div>
      </template>
    </com-box>
    <com-box class="box-btn">
      <template v-slot>
        <div class="nav">
          <div class="nav-list">
            <div class="liat-btn">
              <!-- <div @click="handQuery('query')" class="btn qurey">查询</div> -->
              <div @click="handQuery" class="btn reset">重置</div>
            </div>
            <div
              :class="[
                'list-item',
                {
                  'list-item-back': lineState.taskCodeIndex.includes(
                    item.serviceNum
                  )
                }
              ]"
              v-for="item in tableClickItem"
              :key="item.serviceCode"
            >
              <div class="item-til">{{ item.goodsName }}</div>
              <el-icon
                class="item-icon"
                @click="handListClick(item.serviceCode)"
                ><CloseBold
              /></el-icon>
            </div>
          </div>
        </div>
      </template>
    </com-box>
  </div>
</template>
<script lang="ts">
import { CloseBold } from '@element-plus/icons-vue'
import { defineComponent, reactive, watch } from 'vue'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
interface ILineSate {
  isGroup: boolean
  title: string
  taskCodeIndex: string[]
  lessTask: string
  params: any
  getData: (params: any) => void
}
export default defineComponent({
  name: 'centerLower',
  components: {
    comBox,
    CloseBold
  },
  props: {
    tableClickItem: {
      type: Array,
      default: () => {
        return []
      }
    },
    serviceData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  setup(props, { emit }) {
    //折线图
    const lineState: ILineSate = reactive({
      isGroup: false,
      title: '-',
      taskCodeIndex: [],
      lessTask: '',
      params: {
        loading: true,
        forceRedraw: true, // 强制重绘
        map: {},
        options: {
          dataset: {
            dimensions: [],
            source: []
          },
          legend: {
            right: 0,
            top: 5,
            width: '90%',
            align: 'left'
          },
          // 待完善：此处如果注释会导致添加不上axisLabel->fontSize的chartFontSize，因为递归合并时直接赋值xAxis全局配置了
          xAxis: [
            {
              axisLabel: {
                hideOverlap: true
              }
            }
          ],
          yAxis: [
            {
              name: ['', ''],
              position: ['left', ''],
              splitLine: {
                show: false
              }
            }
          ],
          grid: {
            top: 50,
            bottom: 55,
            left: 15,
            right: 15
          },
          dataZoom: [
            {
              show: true,
              type: 'slider',
              start: 0,
              end: 100,
              width: '92%',
              left: '6%',
              bottom: 28,
              height: 15,
              borderColor: '#166beb',
              handleStyle: {
                color: '#166beb',
                borderColor: '#166beb',
                borderWidth: 4
              },
              moveHandleSize: 10,
              moveHandleStyle: {
                color: '#166beb'
              },
              textStyle: {
                color: '#00c6ff'
              },
              emphasis: {
                handleStyle: {
                  color: '#00c6ff',
                  borderColor: '#00c6ff',
                  borderWidth: 4
                },
                moveHandleStyle: {
                  color: '#00c6ff'
                }
              }
            }
          ],
          series: [
            {
              type: [
                'line',
                'line',
                'line',
                'line',
                'line',
                'line',
                'line',
                'line',
                'line'
              ],
              label: {
                show: false
              },
              connectNulls: true,
              symbolSize: 7, //折线点的大小
              itemStyle: {
                color: [
                  '#5dec9d',
                  '#ea68a2',
                  '#1da7ff',
                  '#ec6941',
                  '#ffba0a',
                  '#d7864a',
                  '#f0ff00',
                  '#432ada',
                  '#0867d6',
                  '#bd64f6',
                  '#0df1ff',
                  '#86bcff',
                  '#93FF00'
                ]
              },
              smooth: true,
              areaStyle: {
                opacity: 0
              }
            }
          ]
        }
      },
      getData: (params) => {
        lineState.params.loading = true
        httpRequest
          .get({
            url: 'M2P3Fwjgzs',
            params
          })
          .then((res) => {
            if (res.code === 200) {
              lineState.title = res.title
              lineState.params.options.dataset.dimensions = [
                'name',
                ...Object.keys(res.map)
              ]
              lineState.params.map = res.map
              // (一条以上)多条折线时数据不显示单位
              if (Object.keys(res.map).length <= 1) {
                lineState.params.options.yAxis[0].name = [res.unit, '']
              } else {
                lineState.params.options.yAxis[0].name = ['', '']
              }
              // 过滤掉0的数据
              res.data.forEach((item: any) => {
                Object.keys(item).forEach((inse: string) => {
                  if (item[inse] === '0' || item[inse] < 0) {
                    item[inse] = '-'
                  }
                })
              })
              lineState.params.options.dataset.source = res.data
              lineState.params.loading = false
            }
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    const handListClick = (key: string) => {
      emit('keyColse', key)
    }
    const handQuery = () => {
      if (props.tableClickItem.length <= 0) {
        return
      }
      // if (val === 'query') {
      //   /**
      //    * 查询功能：
      //    * 因为数据问题，学费类别的taskCode 和其他的不一样
      //    * 所以不能放一起查询，只能要么是学费类别，要么是非学费类别
      //    * lessTask是学费类别的taskCode
      //    */
      //   let serviceList: string[] = []
      //   let taskList: string[] = []
      //   lineState.taskCodeIndex = []
      //   props.tableClickItem.forEach((item: any) => {
      //     serviceList.push(item.serviceCode)
      //     if (item.taskCode === lineState.lessTask) {
      //       lineState.taskCodeIndex.push(item.serviceNum)
      //     }
      //     taskList.push(item.taskCode)
      //   })
      //   if (Array.from(new Set(taskList)).length > 1) {
      //     return
      //   } else {
      //     lineState.taskCodeIndex = []
      //   }
      //   // 查询
      //   lineState.getData({
      //     serviceCode: serviceList.join(),
      //     taskCode: taskList[0]
      //   })
      // } else {
      // 清空
      emit(
        'keyColse',
        props.tableClickItem
          .map((i: any) => {
            return i.serviceCode
          })
          .join()
      )
      // }
    }
    watch(
      () => props.serviceData,
      (newVal) => {
        if (newVal.show) {
          lineState.lessTask = newVal.lessTask
          lineState.taskCodeIndex = []
          lineState.getData({
            serviceCode: newVal.serviceCode,
            taskCode: newVal.taskCode
          })
        }
      }
    )
    watch(
      () => props.tableClickItem,
      (newVal) => {
        if (newVal.length <= 0) {
          return false
        }
        /**
         * 查询功能：
         * 因为数据问题，学费类别的taskCode 和其他的不一样
         * 所以不能放一起查询，只能要么是学费类别，要么是非学费类别
         * lessTask是学费类别的taskCode
         */
        let serviceList: string[] = []
        let taskList: string[] = []
        lineState.taskCodeIndex = []
        newVal.forEach((item: any) => {
          serviceList.push(item.serviceCode)
          if (item.taskCode === lineState.lessTask) {
            lineState.taskCodeIndex.push(item.serviceNum)
          }
          taskList.push(item.taskCode)
        })
        if (Array.from(new Set(taskList)).length > 1) {
          return
        } else {
          lineState.taskCodeIndex = []
        }
        if (lineState.taskCodeIndex.length <= 0) {
          // 查询
          lineState.getData({
            serviceCode: serviceList.join(),
            taskCode: taskList[0]
          })
        }
      },
      {
        deep: true
      }
    )
    return {
      lineState,
      handQuery,
      handListClick
    }
  }
})
</script>
<style lang="less" scoped>
.nav-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  .box-echarts {
    width: 74%;
    height: 100%;
    .box {
      height: 100%;
      padding: 0px 8px 7px 8px;
      .box-line {
        height: 100%;
        .line-til {
          height: 85%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 31px;
          font-weight: bold;
          color: #ef7809;
        }
      }
    }
  }
  .box-btn {
    width: 24%;
    height: 100%;
    .nav {
      width: 100%;
      height: 100%;
      padding: 20px 15px 18px 15px;
      .nav-list {
        width: 100%;
        height: 100%;
        .liat-btn {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;
          .btn {
            width: 100%;
            height: 27px;
            font-size: 18px;
            color: rgb(255, 255, 255);
            font-weight: 550;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            &:hover {
              box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3),
                0px 0px 40px #ddd inset;
            }
          }
          // .qurey {
          //   background-color: rgb(19, 181, 177);
          // }
          .reset {
            background-color: rgb(0, 183, 238);
          }
        }
        .list-item {
          width: 100%;
          padding: 0px 6px;
          margin-top: 7px;
          outline: 1px solid rgba(0, 255, 255, 0.2);
          height: 27px;
          font-size: 16px;
          color: rgba(0, 198, 255, 0.902);
          display: flex;
          align-items: center;
          justify-content: space-between;
          .item-til {
            width: calc(100% - 18px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .item-icon {
            cursor: pointer;
            &:hover {
              color: #fff;
            }
          }
        }
        .list-item-back {
          background-color: #152d6d;
        }
      }
    }
  }
}
</style>
